<template>
	<view>
		<!-- <text>反馈建议</text> -->
		<form @submit="formSubmit">

			<!-- <view class="feedback" v-show="FeedbackList[0].memberType==0">
				<text>用户序号:</text>
				<text>{{FeedbackList[0].memberType}}</text>
			</view> -->

			<view class="feedback" v-show="memberId==0">
				<text>用户Id:</text>
				<text>{{memberId}}</text>
			</view>

			<view class="feedback" v-show="memberName==0">
				<text>用户昵称:</text>
				<text>{{memberName}}</text>
			</view>

			<view class="feedback" v-show="uniqueCode==0">
				<text>用户房间号:</text>
				<text>{{uniqueCode}}</text>
			</view>

			<view class="suggest">
				<view class="head-nav">
					<text :class="type==1?'activite':''" @click="checkIndex(1)">投诉</text>
					<text :class="type==2?'activite':''" @click="checkIndex(2)">建议</text>
				</view>

				<view class="suggests" v-if="type==1">
					<textarea maxlength="300" type="text" v-model="content" placeholder="我要投诉..."></textarea>
					<text>{{content.length}}/300</text>
				</view>
				<view class="suggests" v-if="type==2">
					<textarea maxlength="300" type="text" v-model="content" placeholder="请输入您的建议(0~300字)"></textarea>
					<text>{{content.length}}/300</text>
				</view>

			</view>
			<!-- <view class="suggest">
				<text>建议:</text>
				<view class="suggests">
					<textarea @input="sumfontnum" maxlength="300" type="text" v-model="content"
						placeholder="请输入您的建议(0~300字)"></textarea>
				</view>
				<view class="sumfont">
					<text>{{fontnum}}/300</text>
				</view>
			</view> -->

		</form>
		<button class="button" @click="submit()">提交</button>
	</view>
</template>

<script>
	export default {

		components: {

		},

		data() {

			return {

				// navIndex: 1,

				// navList: ["投诉", "建议"],

				FeedbackList: [{
					memberName: '',
					memberType: '',
				}],

				fontnum: '0',
				// FeedbackList: [{
				id: '', //建议序号
				memberId: '', //用户id
				memberName: '', //用户
				memberType: '', //用户序号
				uniqueCode: '', //用户房间号
				content: '', //建议
				type: 1, //投诉
				// }]
			}

		},

		onLoad() {
			this.userName()
			this.getFeedBack()
		},

		methods: {
			//官方下拉刷新
			onPullDownRefresh() {
				// console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			
			//选项卡每点击一次置空
			formSubmit(e) {
				this.content = '';
			},
			
			// 点击事件判断
			checkIndex(index) {
				this.type = index;
				if (this.type == 1) {
					this.content = '';
				}
				if (this.type == 2) {
					this.content = '';
				}
			},

			checkListIndex(index) {
				this.listIndex = index;
			},
			
			//获取接待人id
			userName() {
				this.memberId = uni.getStorageSync('id');
				this.memberName = uni.getStorageSync('memberName');
				this.uniqueCode = uni.getStorageSync('uniqueCode');
			},
			
			//数据列表
			async getFeed() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-operate/suggestion/save',
						method: "post",
						data: {
							memberId: this.memberId,
							memberName: this.memberName,
							uniqueCode: this.uniqueCode,
							content: this.content,
							type: this.type,
							memberType: this.FeedbackList[0].memberType
						}
					})
			},
			
			async getFeedBack() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-operate/members?memberType=' + this.memberType + '&memberName=' +
							this.memberName,
						method: "get",
					})
				this.FeedbackList = res.body.members.data;
			},
			
			//submit判断提交方法
			submit() {
				if (this.type == 1) {
					if (this.content == '') {
						uni.showToast({
							title: "投诉内容不能为空!",
							icon: "none",
						})
					} else {
						// console.log("用户序号：" + this.FeedbackList[0].memberType + "，用户Id：" + this.memberId + "，用户名：" + this
						// 	.memberName + "，用户房间号：" + this.uniqueCode + "，type字典：" + this.type + "，用户的建议：" + this
						// 	.content)
						this.getFeed()
						this.getFeedBack()
						uni.showToast({
							title: "感谢你的反馈！",
							icon: "none",
							duration: 1000
						});
						setTimeout(function() {
							uni.navigateBack({
								url: "/pages/feedbackSuggestions/index"
							})
						}, 1000)
					}
				}
				if (this.type == 2) {
					if (this.content == '') {
						uni.showToast({
							title: "请提出您的建议！",
							icon: "none",
						})
					} else {
						// console.log("用户序号：" + this.FeedbackList[0].memberType + "用户Id：" + this.memberId + ",用户名：" + this
						// 	.memberName + ",用户房间号：" + this.uniqueCode + ",type字典：" + this.type + ",用户的建议：" + this
						// 	.content)
						this.getFeed()
						this.getFeedBack()
						uni.showToast({
							title: "感谢您的建议！",
							icon: "none",
							duration: 1000
						});
						setTimeout(function() {
							uni.navigateBack({
								url: "/pages/feedbackSuggestions/index"
							})
						}, 1000)
					}
				}
				// this.getFeed()
				// uni.redirectTo({
				// 	url: "/pages/index/index"
				// });
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ebeff6;
	}

	.feedback {
		display: flex;
	}

	.rooms {
		margin-left: 24rpx;
	}

	.suggest {
		width: 100%;
		height: 634rpx;
		padding: 24rpx;
		background-color: #FFFFFF;
		// border: 1rpx solid;
	}

	.suggests {
		// border: 1rpx solid;
		width: 95%;
		height: 534rpx;
		margin-top: 8rpx;
		font-size: 44rpx;
		position: relative;

		text {
			// background-color: #007AFF;
			position: absolute;
			right: 0;
			bottom: 0;
			margin-right: 24rpx;
			font-size: 32rpx !important;
			color: #C0C0C0;
		}

		textarea {
			// border: 1rpx solid;
			width: 100%;
			height: 534rpx;
			font-size: 32rpx;
		}
	}

	.suggests text {
		font-size: 44rpx;
	}

	.button {
		width: 88%;
		height: 69rpx;
		line-height: 69rpx;
		margin-top: 164rpx;
		background-color: #da422a;
		color: #FFFFFF;
		font-weight: bold;
	}

	.head-nav {
		width: 50%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			font-size: 32rpx;
		}
	}

	.activite {
		font-weight: bold;
		border-bottom: 6rpx solid #0065d9;
	}

	.head-nav>view {
		padding-bottom: 10rpx;
	}
</style>
